<template>
    <div class="show" @click="$router.push(`/main/servicedetail/${list.id}`)">
        <div class="show_item">
            <img
            :src="list.service_img"
            alt="">
            <p class="title">{{ list.service_name }}</p>
            <div class="pice">￥{{list.service_pice}}起</div>
        </div>
    </div>
</template>

<script>
export default {
  props: ['list']

}
</script>

<style lang="less" scoped>
.show_item{
    width: 187px;
    height: 252px;
    background: #f8f8f8;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 15px;
    margin-bottom: 16px;
    /* 过渡时间 */
    transition: all .5s;
    img{
        width: 163px;
        height: 152px;
    }
    .title{
        width: 163px;
        font-size: 16px;
        color: #333333;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
        margin: 13px 0 15px;
    }
    .pice{
        font-size: 14px;
        font-size: 16px;
        color: #fe6100;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
    }
}
.show_item:hover{
     /* 缩放 */
    //  transform: scale(1.2);
    //  位移 + 缩放
    transform: translate(0, -10px) scale(1.1) ;
}
</style>
